<!DOCTYPE html>
<html lang="zh-CN">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能小区管理系统登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/Font-Awesome-6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #7209b7;
            --light-color: #f8f9fa;
            --success-color: #2ecc71;
            --error-color: #e74c3c;
            --shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            background-attachment: fixed;
            padding: 20px;
        }

        .login-card {
            position: relative;
            width: 100%;
            max-width: 480px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: translateY(0);
            transition: var(--transition);
            animation: cardEntrance 0.6s ease-out;
        }

        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 40px 20px 50px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .card-header h1 {
            font-size: 2.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 2;
        }

        .card-header p {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 350px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .card-header::before,
        .card-header::after {
            content: "";
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .card-header::before {
            top: -40px;
            left: -40px;
        }

        .card-header::after {
            bottom: -60px;
            right: -60px;
        }

        .card-body {
            padding: 40px 30px 30px;
        }

        .input-group {
            position: relative;
            margin-bottom: 30px;
            transition: var(--transition);
        }

        .input-group.focused {
            transform: translateY(-3px);
        }

        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: #777;
            transition: var(--transition);
            z-index: 2;
        }

        .input-group input {
            width: 100%;
            height: 56px;
            padding: 0 48px 0 48px; /* 调整左右padding */
            font-size: 1rem;
            border-radius: 12px;
            border: 2px solid #e0e0e0;
            background: #f9f9f9;
            transition: var(--transition);
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

        .input-group input:focus {
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
        }

        .input-group input:focus + i {
            color: var(--primary-color);
        }

        .input-group input::placeholder {
            color: #999;
        }

        /* 密码切换按钮样式 */
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #777;
            font-size: 1.2rem;
            z-index: 2;
            transition: var(--transition);
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .password-toggle:hover {
            color: var(--primary-color);
            background-color: rgba(0, 0, 0, 0.05);
        }

        .password-toggle.active {
            color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.1);
        }

        .flex-options {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            font-size: 0.9rem;
        }

        .option-link {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .option-link:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        .btn-login {
            display: block;
            width: 100%;
            height: 56px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-login:hover {
            background: linear-gradient(to right, var(--accent-color), var(--primary-color));
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(67, 97, 238, 0.6);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent
            );
            transition: 0.5s;
        }

        .btn-login:hover::after {
            left: 100%;
        }

        .card-footer {
            text-align: center;
            padding: 25px 0;
            font-size: 0.9rem;
            color: #777;
            border-top: 1px solid #eee;
            margin: 0 30px;
        }

        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .success-message {
            position: fixed;
            top: 30px;
            right: 30px;
            background: var(--success-color);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            transform: translateX(100%);
            transition: var(--transition);
            z-index: 1000;
        }

        .success-message.show {
            opacity: 1;
            transform: translateX(0);
        }

        .error-message {
            position: fixed;
            top: 30px;
            right: 30px;
            background: var(--error-color);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            transform: translateX(100%);
            transition: var(--transition);
            z-index: 1000;
        }

        .error-message.show {
            opacity: 1;
            transform: translateX(0);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }

        .loading-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .loading-spinner {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top-color: var(--primary-color);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 600px) {
            body {
                padding: 15px;
            }

            .login-card {
                max-width: 100%;
            }

            .card-header {
                padding: 30px 15px 40px;
            }

            .card-header h1 {
                font-size: 1.9rem;
            }

            .card-body {
                padding: 30px 20px 20px;
            }

            .flex-options {
                flex-direction: column;
                gap: 12px;
                align-items: flex-start;
            }

            .success-message, .error-message {
                top: 15px;
                right: 15px;
                left: 15px;
                transform: translateY(-30px);
            }

            .success-message.show, .error-message.show {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
<div class="login-card">
    <div class="card-header">
        <h1>智能小区管理系统</h1>
        <p>欢迎回来，请登录您的账号</p>
    </div>

    <div class="card-body">
        <form class="login-form" id="loginForm">
            <div class="input-group" id="usernameGroup">
                <i class="fas fa-user"></i>
                <input type="text" name="username" id="username" placeholder="请输入登录账号" maxlength="24" required>
            </div>

            <div class="input-group" id="passwordGroup">
                <i class="fas fa-lock"></i>
                <input type="password" name="password" id="password" placeholder="请输入密码" maxlength="20" required>
                <!-- 密码切换按钮移动到输入框内部 -->
                <span class="password-toggle" id="passwordToggle">
                    <i class="fas fa-eye"></i>
                </span>
            </div>

            <div class="flex-options">
                <a href="register.html" class="option-link" id="registerLink">
                    <i class="fas fa-user-plus"></i> 立即注册
                </a>
                <a href="page/forget.html" class="option-link" id="forgetLink">
                    <i class="fas fa-question-circle"></i> 忘记密码？
                </a>
            </div>

            <button type="submit" class="btn-login" id="loginBtn">
                <span id="btnText">登录系统</span>
                <div id="btnLoader" class="hidden">
                    <i class="fas fa-spinner fa-spin"></i> 登录中...
                </div>
            </button>
        </form>
    </div>
</div>

<div class="success-message">
    <i class="fas fa-check-circle fa-2x"></i>
    <div>
        <h3>登录成功！</h3>
        <p>正在进入管理系统...</p>
    </div>
</div>

<div class="error-message">
    <i class="fas fa-exclamation-circle fa-2x"></i>
    <div>
        <h3>登录失败</h3>
        <p id="errorText">用户名或密码错误</p>
    </div>
</div>

<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
</div>

<script src="./lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        // 元素缓存
        const $passwordInput = $('#password');
        const $passwordToggle = $('#passwordToggle');
        const $passwordIcon = $passwordToggle.find('i');
        const $loginForm = $('#loginForm');
        const $loginBtn = $('#loginBtn');
        const $btnText = $('#btnText');
        const $btnLoader = $('#btnLoader');
        const $usernameInput = $('#username');
        const $errorMessage = $('.error-message');
        const $successMessage = $('.success-message');
        const $usernameGroup = $('#usernameGroup');
        const $passwordGroup = $('#passwordGroup');
        const $loadingOverlay = $('#loadingOverlay');

        // 密码可见性切换功能
        $passwordToggle.on('click', function() {
            const newType = $passwordInput.attr('type') === 'password' ? 'text' : 'password';
            const newIcon = newType === 'text' ? 'fa-eye-slash' : 'fa-eye';

            $passwordInput.attr('type', newType);
            $passwordIcon.removeClass('fa-eye fa-eye-slash').addClass(newIcon);

            // 添加/移除激活状态
            $passwordToggle.toggleClass('active', newType === 'text');
        });

        // 输入框聚焦效果
        $('.input-group input').each(function() {
            const $this = $(this);
            const $group = $this.closest('.input-group');

            $this.on('focus', function() {
                $group.addClass('focused');
            }).on('blur', function() {
                $group.removeClass('focused');
            });
        });

        // 表单提交处理
        $loginForm.on('submit', function(e) {
            e.preventDefault();

            const username = $usernameInput.val().trim();
            const password = $passwordInput.val().trim();

            // 表单验证
            if (!username) {
                showError('用户名不能为空');
                shakeElement($usernameGroup);
                $usernameInput.focus();
                return false;
            }

            if (!password) {
                showError('密码不能为空');
                shakeElement($passwordGroup);
                $passwordInput.focus();
                return false;
            }

            // 显示加载状态
            showLoading(true);
            // 发送登录请求
            $.ajax({
                url: "/user/login",
                method: "POST",
                data: {
                    username: username,
                    password: password
                },
                dataType: 'json',
                success: function(res) {
                    console.log(res);

                    if (res.code === 0) {
                        // 登录成功
                        localStorage.setItem('user', JSON.stringify(res.data));
                        // 显示成功消息
                        showSuccess();

                        // 2秒后跳转
                        setTimeout(() => {
                            window.location.href = 'index.html';
                        }, 2000);
                    } else {
                        // 登录失败
                        showError(res.msg || '登录失败，请重试');
                        shakeElement($loginForm);
                    }
                },
                error: function() {
                    // 请求失败
                    showError('网络错误，请稍后重试');
                    shakeElement($loginForm);
                },
                complete: function() {
                    showLoading(false);
                }
            });
        });

        // 错误提示函数
        function showError(message = '用户名或密码错误') {
            // 设置错误消息内容
            $('#errorText').text(message);

            // 显示错误消息
            $errorMessage.addClass('show');

            // 3秒后隐藏
            setTimeout(() => {
                $errorMessage.removeClass('show');
            }, 3000);
        }

        // 成功提示函数
        function showSuccess() {
            $successMessage.addClass('show');

            setTimeout(() => {
                $successMessage.removeClass('show');
            }, 2000);
        }

        // 加载状态控制
        function showLoading(visible) {
            $loadingOverlay.toggleClass('visible', visible);
            $btnText.toggle(!visible);
            $btnLoader.toggleClass('hidden', !visible);
            $loginBtn.prop('disabled', visible);
        }

        // 抖动动画效果
        function shakeElement($element) {
            $element.css('animation', 'shake 0.5s');
            setTimeout(() => {
                $element.css('animation', '');
            }, 500);
        }

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) {
            top.location = self.location;
        }

        // 添加抖动动画样式
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
                20%, 40%, 60%, 80% { transform: translateX(5px); }
            }
            .btn-loader {
                position: relative;
                padding: 0 30px;
            }
            .hidden {
                display: none;
            }
        `;
        document.head.appendChild(style);
    });
</script>
</body>
</html>